<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>心悦酒店管理系统(xinyue.com)-酒店预订、酒店查询、宾馆住宿预订</title>
	<meta name="description" content="心悦酒店专门为您提供酒店预订，酒店价格查询，优质的宾馆住宿推荐、以及酒店地址、酒店图片，真实用户点评等酒店信息。">
	<meta name="keywords" content="酒店预订,酒店查询,宾馆住宿预订">
	<link rel="shortcut icon" href="/favicon1.ico" />
	<link rel="bookmark" href="/favicon1.ico" />
	<!-- Bootstrap -->
	<link href="/app/css/bootstrap.min.css" rel="stylesheet" />
	<!-- Main styles -->
	<link href="/app/css/style.css" rel="stylesheet" />
	<!--<link rel="stylesheet/less" href="css/style.less" />-->
	<!-- IE styles -->
	<link href="/app/css/ie.css" rel="stylesheet" />
	<!-- Font Awesome -->
	<link href="/app/css/font-awesome.min.css" rel="stylesheet" />
	<!-- OWL Carousel -->
	<link href="/app/css/owl.carousel.css" rel="stylesheet" />
	<!-- Jquery UI -->
	<link href="/app/css/jquery-ui.css" rel="stylesheet" />

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries 
		WARNING: Respond.js doesn't work if you view the page via file-->
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<!-- 引入vue cdn -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<!-- 引入axios cdn -->
	<script src="/app/vue/axios/axios.min.js"></script>
	<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
</head>

<body>
	<div id="vue-app">
		<!-- Overlay preloader-->
		<div class="htlfndr-loader-overlay"></div>
		<div class="htlfndr-wrapper">
		<header>
			<div class="htlfndr-top-header">
				<div class="navbar navbar-default htlfndr-blue-hover-nav">
					<div class="container">
						<!-- Brand and toggle get grouped for better mobile display -->
						<div class="navbar-header">
							<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
								data-target="#htlfndr-first-nav">
								<span class="sr-only">Toggle navigation</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>
							<a class="htlfndr-logo navbar-brand" href="index.html">
								<img src="/app/images/logo.png" style="width: 30px;height: 23px;" alt="Logo" />
								<p class="htlfndr-logo-text">心悦酒店 <span>Hotel</span></p>
							</a>
						</div><!-- .navbar-header -->
						<!-- Collect the nav links, forms, and other content for toggling -->
						<div class="collapse navbar-collapse navbar-right" id="htlfndr-first-nav">
							<!-- List with sing up/sing in links -->
							<ul class="nav navbar-nav htlfndr-singup-block">
								<li id="htlfndr-singup-link" th:if="${user_info == null}">
									<a href="/hotel/manage/reg"><span>注册</span></a>
								</li>
								<li id="htlfndr-singin-link" th:if="${user_info == null}">
									<a href="/hotel/manage/login"><span>登录</span></a>
								</li>
								<li id="htlfndr-singup-link" th:if="${user_info}">
									<a th:href="@{'/hotel/manage/index?user_id=' + ${user_info.id}}"><span th:text="'心悦酒店欢迎您：'+${user_info.username}"></span></a>
								</li>
								<li id="htlfndr-singin-link" th:if="${user_info}">
									<a href="/manage/quit?retUrl=index.html"><span>注销</span></a>
								</li>
							</ul>
						</div><!-- .collapse.navbar-collapse -->
					</div><!-- .container -->
				</div><!-- .navbar.navbar-default.htlfndr-blue-hover-nav-->
			</div><!-- .htlfndr-top-header -->
			<!-- Start of main navigation -->
			<div class="htlfndr-under-header">
				<nav class="navbar navbar-default">
					<div class="container">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
								data-target="#htlfndr-main-nav">
								<span class="sr-only">Toggle navigation</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>
						</div><!-- .navbar-header -->
						<!-- Collect the nav links, forms, and other content for toggling -->
						<div class="collapse navbar-collapse" id="htlfndr-main-nav">
							<ul class="nav navbar-nav">
								<li class="active">
									<a href="index.html">首页</a>
								</li>
								<li><a href="/app/house">客房</a></li>
								<li class="dropdown" v-for="item in cates">
									<a :href="'/app/cates?id='+item.id" v-text="item.title"></a>
									<ul class="dropdown-menu">
										<li class="" v-for="sub in item.subs">
											<a :href="'/app/cates?id='+sub.id" v-text="sub.title"></a>
										</li>
									</ul>
								</li>
							</ul>
						</div><!-- .collapse.navbar-collapse -->
					</div><!-- .container -->
				</nav><!-- .navbar.navbar-default.htlfndr-blue-hover-nav -->
			</div><!-- .htlfndr-under-header -->
			<!-- End of main navigation -->
			<!-- Start of slider section -->
			<section class="htlfndr-slider-section">
				<div class="owl-carousel owl-theme" style="opacity: 1; display: block;">
					<div class="htlfndr-slide-wrapper" v-for="ad in ads">
						<img :src="ad.thumb" alt="img-1">
						<div class="htlfndr-slide-data container">
							<h1 class="htlfndr-slider-title" v-text="ad.title"></h1>
							<div class="htlfndr-slider-under-title-line"></div>
						</div><!-- .htlfndr-slide-data.container-->
					</div>
				</div>
				<!-- Search form aside start -->
				<!-- Search form aside stop -->
			</section><!-- .htlfndr-slider-section -->
			<!-- End of slider section -->
			<noscript>
				<h2>You have JavaScript disabled!</h2>
			</noscript>
		</header>

		<!-- Start of main content -->
		<main role="main">
			<!-- Section with popular destinations -->
			<section class="container-fluid htlfndr-categories-portfolio">
				<h2 class="htlfndr-section-title bigger-title">热门客房HOTS</h2>
				<div class="htlfndr-section-under-title-line"></div>
				<div class="container">
					<div class="row">
						<div class="col-sm-4 col-xs-6" v-for="(item,index) in all_house">
							<div class="htlfndr-category-box" onclick="void(0)" v-if="index < 6">
								<!-- The "onclick" is using for Safari (IOS)
						that recognizes the 'div' element as a clickable element -->
								<img :src="item.thunb" height="311" width="370" alt="category-img" />
								<div class="category-description">
									<div class="htlfndr-icon-flag-border"><i class="htlfndr-icon-flag flag-germany"></i>
									</div>
									<!-- .htlfndr-icon-flag-border -->
									<h2 class="subcategory-name">{{item.rooname}}</h2>
									<a :href="'/app/detail?id=' + item.id" class="htlfndr-category-permalink"></a>
									<!-- This link will be displayed to "block" and
							will overlay to whole box by hovering on large desktop and will be a circle link on small devices -->
									<h5 class="category-name" v-text="item.cate"></h5>
									<p class="category-properties"><span>￥{{item.price2}}</span>
										<span style="text-decoration: line-through;">￥{{item.price}}</span>
									</p>
								</div><!-- .category-description -->
							</div><!-- .htlfndr-category-box -->
						</div>
					</div><!-- .row -->
				</div>
			</section><!-- .container-fluid.htlfndr-categories-portfolio -->
			<!-- Section called USP section -->
			<section class="container-fluid htlfndr-usp-section">
				<h2 class="htlfndr-section-title htlfndr-lined-title"><span>酒店资讯NEWS</span></h2>
				<!-- You need <span> and 'htlfndr-lined-title' class for both side line -->
				<div class="container">
					<div class="row">
						<div class="col-sm-4 htlfndr-icon-box" v-for="(item,index) in news" v-if="index < 3">
							<img class="htlfndr-icon icon-drinks" style="width:100%;height:100%" :src="item.thumb"
								alt="icon" />
							<h5 class="htlfndr-section-subtitle" v-text="item.title"></h5>
							<p v-text="item.description"></p>
							<a :href="'/app/view.do?id=' + item.id" class="htlfndr-read-more-button">read more</a>
						</div>
					</div><!-- .row -->
				</div><!-- .container -->
			</section><!-- .container-fluid .htlfndr-usp-section -->
		</main>
		<!-- End of main content -->

		<!-- Start of the Footer -->
		<footer class="htlfndr-footer">
			<button class="htlfndr-button-to-top" role="button"><span>Back to top</span></button>
			<!-- Button "To top" -->

			<div class="htlfndr-copyright">
				<div class="container" role="contentinfo">
					<p>Copyright 2021 | 心悦酒店管理系统 | All Rights Reserved |
					</p>
				</div><!-- .container -->
			</div><!-- .htlfndr-copyright -->
		</footer>
	</div>
	<!-- 引入vue实例js -->
	<script src="/app/vue/index.js"></script>
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="/app/js/jquery-1.11.3.min.js"></script>
	<!-- Include /app/Jquery UI script file -->
	<script src="/app/js/jquery-ui.min.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<!-- Include Query UI Touch Punch is a small hack that enables the use
	of touch events on sites using the jQuery UI user interface library. -->
	<script src="/app/js/jquery.ui.touch-punch.min.js"></script>
	<script src="/app/js/bootstrap.min.js"></script>
	<!-- Include Owl Carousel script file -->
	<script src="/app/js/owl.carousel.min.js"></script>
	<!-- Include main script file -->
	<script src="/app/js/script.js"></script>

	<!--<script src="js/less.min.js" ></script> -->
	<link href="/toastr-master/toastr.min.css" rel="stylesheet" type="text/css" />
	<script src="/toastr-master/toastr.min.js"></script>
</body>

</html>